<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>我的书库</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <!-- 栅格 -->
      <el-row :gutter="20">
        <!-- 搜索栏 -->
        <el-col :span="9">
          <el-input
            placeholder="请输入需要查询的用户信息"
            clearable
            v-model="queryTxt"
            @clear="getStackList"
            @change="getStackList"
            ><el-button
              slot="append"
              icon="el-icon-search"
              @click="getStackList"
            ></el-button
          ></el-input>
        </el-col>
      </el-row>
      <el-row>
        <!-- 书库展示表格 -->
        <el-table :data="stackList" stripe border>
          <el-table-column label="编号" type="index"></el-table-column>
          <el-table-column label="书本名称" prop="bookname"></el-table-column>
          <el-table-column label="类别" prop="sort"></el-table-column>
          <el-table-column label="租借时间" prop="head_time"></el-table-column>
          <el-table-column label="租赁价格" prop="price"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" @click="give(scope.row)"
                >归还</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      queryTxt: "",
      stackList: [],
    };
  },
  created() {
    this.getStackList();
  },
  methods: {
    getStackList() {
      let token = sessionStorage.getItem("token");
      let userName = JSON.parse(token).username;
      this.$http.get("users?q=" + userName).then((rs) => {
        console.log(rs.data[0].children);
        // rs.data[0].children.forEach(res => {
        //     if (!res.state) {
        //         this.stackList.push(res)
        //     }
        // });
        this.stackList = rs.data[0].children;
      });
    },
    give(row) {
      let end_time = +new Date();
      let times = (end_time - row.head_time) / 1000;
      let day = parseInt((times / 60 / 60 / 24) % 365);
      let total = day * row.price;
      this.$confirm("确认归还吗?当前归还需支付" + total + "￥", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        //   center:true
      })
        .then(() => {
          console.log(row);
          row.state = true;
          this.$http.put("book/" + row.id, row).then((rs) => {
            if (rs.status === 200) {
                // row = {}
                console.log(row);
              this.$message({
                type: "success",
                message: "支付成功!",
              });
            }else{
                this.$message({
                    type:"error",
                    message:'支付失败'
                })
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消支付",
          });
        });
    },
    del(){

    }
  },
};
</script>
<style lang="">
</style>